import React, { Component } from 'react';

import '../../styles/MyCategory.css'
import { category_list,category_subcate } from '../../api/category';
class MyCategory extends Component {
    constructor(props) {
        super(props)
        this.state = {
            categoryList: [
                
            ],
            category: [
               
            ],
            list: [
              
            ],
            currentIndex: 0,
            id: 225510,
        }
    };
    
    componentDidMount() {
        category_list().then((res) => {
            console.log(res.data.list)
            this.setState({
                categoryList: res.data.list,
              
            })
        })
        category_subcate({ id:this.state.id }).then((res) => {
            console.log(res.data.subcate.subcategory)
            this.setState({
                category:res.data.subcate.subcategory
            })
        })
    }
    handleClick(index,id) {
        console.log()
        this.setState({
            currentIndex: index,
            id:id
        }, () => {

            category_subcate({ id:this.state.id }).then((res) => {
                console.log(res.data.subcate.subcategory)
                this.setState({
                    category:res.data.subcate.subcategory
                })
            })
        })
       
    }
    myclick(id) {
        console.log(id)
        this.props.history.push({ pathname: '/Index/allgood', state: { id: id } })
    }
    jump() {
        this.props.history.push('/search')
    }
    render() {
        return (
            <div className='my-category'>
                
                <div className='ipt'>
                    <p>分类</p>
                    <input type="text" placeholder='  搜索店铺内商品' onChange={()=>{this.jump()}} />
                </div>
             
                <div className='listbox'>
                    <ul className='left'>
                        {
                            this.state.categoryList.map((item, index) => {
                                return (
                           
                                    <li className={`lil ${this.state.currentIndex === index ? 'active1' : ''}`} onClick={() => { this.handleClick(index,item.id) }} key={index}>{ item.name}</li>
                                    
                                )
                            })
                        }
                       
                    </ul>
                    <div className='right'>
                        {
                            this.state.category&&
                            this.state.category.map((item2, index) => {
                               
                                return (
                           <div className='nav' key={index}> 
                                        <p className='itmname'>{item2.name}</p>
                                        <div className='rhtlist'>
                                            {

                                                item2.subNavs.map((item3, index) => {
                                                    return (
                                                        <div className='itembox' key={index} onClick={(()=>{this.myclick(item3.id)})}>
                                                            <img src={item3.pic} alt="" />
                                                            <p>{ item3.name}</p>
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div>
                                )
                            })
                        }
                        
                    
                    </div>
                </div>
                </div>
               
        );
    }
}

export default MyCategory;